<template>
	<view class="column">
		<view v-if="!progressList||progressList.length<1" style="display: flex; flex: 1; justify-content: center;">
			<view>
				<view class="charts-error"></view>
				<view style="margin-top: 12px; align-items: center; display: flex; flex: 1;justify-content: center;font-size: 14px;color: #CCCCCC;">{{errorMessage}}</view>
			</view>
		</view>
		<view v-if="progressList&&progressList.length>0" @click.stop="_itemClick(index)" v-for="(item,index) in progressList" :key="index"
			:class="['row','font-small','progress',padMiddle?'paddingMiddle':'']">
			<text class="title">{{item.name}}</text>
			<view class="body">
				<view class="number">{{item.now?item.now+"/":""}}{{item.expect}} [{{item.value}}%]</view>
				<progress :percent="item.value" backgroundColor="#C9C9C9"
					:border-radius="borderRadius?borderRadius+'rpx':'0px'" :color='formColor(item.value)'
					stroke-width="16" />
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 数据格式
	 * dataList: [{
			name: '一号工艺',
			now: '10',
			expect: '100',
			value: '10'
		},
	]
	 */

	export default {
		name: 'data-progress',
		emits: ['itemClick'],
		props: {
			progressList: {
				type: Array,
				default: () => {
					return []
				}
			},
			borderRadius: {
				type: Number,
				default: 50
			},
			padMiddle: {
				type: [String, Boolean],
				default: "false"
			},
			colorList: {
				type: Array,
				default: () => {
					return ['#EE6666', '#FAC858', '#FC8452', '#1890FF', '#73C0DE', '#9A60B4', '#ea7ccc', '#91CB74',
						'#3CA272'
					];
				}
			},
			cutNumber: {
				type: Number,
				default: 5
			},
			errorMessage:{
				type:String,
				default:""
			}
		},
		data() {
			return {
				time: 0
			}
		},
		watch: {
			"progressList": {
				deep: true,
				handler: function(newVal, oldVal) {
					// this.time = newVal.filter(x=>x.name=="时间进度")[0].value;
				}
			}
		},
		created() {
			// this.time = this.progressList.filter(x=>x.name=="时间进度")[0].value;
		},
		methods: {
			formColor(value) {
				if (value != "" && !isNaN(value) && this.colorList != undefined && this.colorList.length > 0) {
					var temIndex = Number(value) / Number(Math.floor(100 / this.cutNumber));
					console.log(temIndex)
					if ((temIndex + "").indexOf('.') > -1) {
						//下退获取只取整数的值不四舍五入
						temIndex = Math.floor(temIndex) - 1;
						return this.colorList[temIndex];
					} else {
						if (temIndex > 0) {
							temIndex = temIndex - 1
						}
						return this.colorList[temIndex];
					}
				} else {
					return "#1890ff";
				}
			},
			/**
			 * 注册元素点击事件
			 * @param {Object} e 索引值
			 */
			_itemClick(e) {
				this.$emit('itemClick', e);
			}

		}
	}
</script>

<style scoped>
	.paddingMiddle {
		padding: 18rpx 10rpx;
	}

	.progress.title {
		font-size: 28rpx;
		width: 170rpx;
		display: flex;
		align-items: center;

	}

	.body {
		position: relative;
		flex: 1;

	}

	.number {
		color: #fff;
		position: absolute;
		z-index: 2;
		left: 26rpx;
		height: 100%;
		display: flex;
		align-items: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		height: 44rpx;
	}

	progress {
		padding: 6rpx 0;
	}

	/* 设置进度条的圆角 */
	/deep/ .uni-progress-bar {
		border-radius: 40rpx;
	}

	/deep/ .uni-progress-inner-bar {
		border-radius: 40rpx;
	}

	.charts-error {
		width: 128px;
		height: 128px;
		background: url("");
		background-position: center;
	}
</style>